<template>
  <div class="box" shadow="never">
    <el-form ref="form" :model="Mall" label-width="300px" style="margin: 50px">
      <el-form-item label-width="100px" label="商品名称:" >
        <el-input v-model="Mall.name" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="商品类型:" >
        <!-- <el-input v-model="Mall.type" style="width: 400px" /> -->
         <el-select v-model="Mall.type" placeholder="请选择商品类型">
          <el-option label="药匣" value="药匣"></el-option>
          <el-option label="食疗" value="食疗"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
        <el-button
          type="success"
          @click="addType"
          icon="el-icon-plus"
        ></el-button>
      </el-form-item>

      <el-form-item label-width="100px" label="价格:" >
        <el-input v-model.number="Mall.price" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="商品信息：">
        <el-input
          :autoSize="true"
          style="width: 400px"
          v-model="Mall.goodsDetail"
          type="textarea"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>

      <el-form-item label-width="100px" label="销售项目:" >
        <el-input v-model="Mall.saleProject" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="库存:" >
        <el-input v-model.number="Mall.stock" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="销售数量:" prop="salesNumber">
        <el-input v-model.number="Mall.salesNumber" style="width: 400px" />
      </el-form-item>

      <el-form-item label-width="100px" label="介绍:" >
        <el-input v-model="Mall.introduction" style="width: 400px" />
      </el-form-item>

      <el-form-item label="售卖时间：" label-width="100px" >
        <el-date-picker disabled
          v-model="Mall.createTime"
          type="datetime"
          placeholder="选择售卖日期时间"
          value-format="timestamp"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="更新时间：" label-width="100px">
        <el-date-picker disabled
          v-model="Mall.updateTime"
          type="datetime"
          placeholder="选择日期时间"
          value-format="timestamp"
        >
        </el-date-picker>
      </el-form-item>

      <!-- 上传图片 -->
      <el-form-item label="文章图片：" label-width="100px">
        <el-upload
          class="avatar-uploader"
          action="http://42.194.159.131:8080/pic/imgUpload?path=mall"
          :headers="headers"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="Mall.image" :src="Mall.image" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item style="margin-left: -20px">
        <el-button type="primary" @click="onSubmit">编辑</el-button>
      </el-form-item>
    </el-form>

     <el-dialog :visible.sync="dialogFormVisible">
      <el-form style="width: 80%" :model="Mall" >
        <el-form-item label="商品类型" label-width="100px">
          <el-input autocomplete="off" v-model="Mall.type"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">添 加</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import Tinymce from "@/components/Tinymce";
import healmall from "@/api/healthymall";
export default {
  name: "Mall",
  components: {
    Tinymce,
  },
  data() {
    return {
      dialogFormVisible: false, //对话框（查看）
      Mall: {
        detail: "string",
        goodsDetail: {
          carePoints: "string",
          createTime: "2022-04-11T12:30:34.882Z",
          goodsId: 0,
          manufacturer: "string",
          name: "string",
          netContent: "string",
          updateTime: "2022-04-11T12:30:34.882Z",
          useWay: "string",
        },
        image: "string",
        saleProject: "string",
        stock: 0,
        goodsId: 0,
        name: "string",
        type: "string",
        introduction: "string",
        price: 0,
      },
       headers: {
        Authorization: getToken(),
      },
    };
  },
  created() {
    this.fatchDataId();
  },
  methods: {
    fatchDataId() {
      var id = this.$route.params.goodsId;
      var vm = this;
      healmall.updatemall(id).then(function (resp) {
        vm.Mall = resp.data.goods;
      });
    },
    onSubmit() {
      var vm = this;
      healmall
        .upsubmitmall(vm.Mall)
        .then(function (resp) {
          vm.$message({
            message: "修改成功!",
            type: "success",
          });
          vm.$router.go(-1);
        })
        .catch(function (error) {
          vm.$message.error("修改失败");
        });
    },
       addType(){
    console.log('aaaaaaa');
    this.dialogFormVisible = true;
  },

     //上传图片相关回调
    handleAvatarSuccess(res, file) {
      console.log("aaaaaaaaaa");
      this.Mall.image = res.data.picUrl;
      console.log("上传图片成功", res);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      console.log("beforeAvatarUpload", file);
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  // -------------------------------------------------

};
</script>

<style scoped>
.line {
  text-align: center;
}
.box {
  margin-left: 200px;
  height: 1100px;
  width: 700px;
  border: solid rgb(187, 186, 187);
}
.avatar-uploader .el-upload {
  border: 3px dashed #decfcf;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

